<template>
  <h1>A</h1>
  <input type="text" v-model="text" placeholder="enter A">
</template>
<script setup lang="ts">
import { onActivated, onDeactivated, onUnmounted, onUpdated, ref } from 'vue';

const text = ref<string>('')
// 被 keep-alive 组件包裹的组件具有 Activated Deactivated 生命周期
// Activated 组件被激活，可以多次触发，常用于多次初始化组件
onActivated(()=>{
  console.log('A Activated')
})
// Deactivated 组件被禁用，可以多次触发，用于替代掉 Unmounted 生命周期
onDeactivated(()=>{
  console.log('A Deactivated')
})
// 被激活和禁用的组件不会触发 Unmounted 和 BeforeMount 生命周期
onUnmounted(()=>{
  console.log('A Unmounted')
})
onUpdated(()=>{
  console.log('onUpdated')
})
</script>
<style scoped>

</style>